<template>
  <div>
    <div>
      <h2>搜索条件</h2>
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="视频序号">
          <el-input v-model="searchForm.videoNum" placeholder="视频序号" clearable></el-input>
        </el-form-item>
        <el-form-item label="句子序号">
          <el-input v-model="searchForm.sentenceSeq" placeholder="句子序号" clearable></el-input>
        </el-form-item>
        <el-form-item label="句子内容">
          <el-input v-model="searchForm.sentenceContentOrChinese" clearable placeholder="请输入关键词" style="width: 400px;"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <h2>搜索结果</h2>
      <el-table :data="tableData" style="width: 100%; height: 788px;" border :row-class-name="tableRowClassName"
                v-loading="resultLoadingFlag">
        <el-table-column prop="videoNum" label="视频序号" width="180"></el-table-column>
        <el-table-column prop="sentenceSeq" label="句子序号" width="180"></el-table-column>
        <el-table-column prop="sentenceContent" label="句子内容">
          <template slot-scope="scope">
            <el-link><router-link :to="`modifySentenceKnowledge/${scope.row.videoNum}/${scope.row.sentenceSeq}`"
                                  style="text-decoration: none">{{ scope.row.sentenceContent }}</router-link></el-link>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination style="margin-top: 10px;"
                     background
                     @current-change="handleCurrentChange"
                     :current-page.sync="pageData.currentPage"
                     :page-size="pageData.pageSize"
                     layout="total, prev, pager, next, jumper"
                     :total="pageData.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {findSentencesByPage, findSentencesByPageCondition} from "@/apis/sentence.api";

export default {
  name: "SentenceMaintain",
  async mounted() {
    await this.findAllPageSentences();
  },
  data() {
    return {
      searchForm: {
        videoNum: '',
        sentenceSeq: '',
        sentenceContentOrChinese: ''
      },
      resultLoadingFlag: false,
      tableData: [],
      pageData: {
        currentPage: 1,
        pageSize: 15,
        total: 0
      }
    }
  },
  methods: {
    resetSearchResult() {
      this.pageData.currentPage = 1;
      this.pageData.pageSize = 15;
      this.pageData.total = 0;
      this.tableData = [];
    },
    setSearchResult(data) {
      this.pageData.total = data.totalSize;
      this.tableData = data.data;
    },
    async findAllPageSentences() {
      let res = await findSentencesByPage({
        currentPage: this.pageData.currentPage,
        pageSize: this.pageData.pageSize
      });
      this.setSearchResult(res.data);
    },
    async handleCurrentChange() {
      await this.findAllSentenceByPageCondition();
    },
    tableRowClassName({rowIndex}) {
      if (rowIndex % 2 === 1) {
        return 'green-row';
      }
      return '';
    },
    async findAllSentenceByPageCondition() {
      let res = await findSentencesByPageCondition({
        pageCriteria: {
          currentPage: this.pageData.currentPage,
          pageSize: this.pageData.pageSize
        },
        dataCriteria: {
          videoNum: this.searchForm.videoNum,
          sentenceSeq: this.searchForm.sentenceSeq,
          sentenceContentOrChinese: this.searchForm.sentenceContentOrChinese
        }
      });
      this.setSearchResult(res.data);
    },
    async search() {
      this.resultLoadingFlag = true;
      this.resetSearchResult();
      await this.findAllSentenceByPageCondition();
      this.resultLoadingFlag = false;
    },
    reset() {
      this.searchForm = {
        videoNum: '',
        sentenceSeq: '',
        sentenceContentOrChinese: ''
      }
    }
  },
}
</script>

<style>

.el-table .green-row {
  background: #f0f9eb;
}
</style>